
<template>
    <div class="layout" v-if="show">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <div class="layout-logo"><img src="./assets/logo.png" height=100% width=100%></div>
                    <div class="layout-nav">
                        <MenuItem name="1">
                            <Icon type="ios-navigate"></Icon>
                            管理模块
                        </MenuItem>
                        <MenuItem name="2">
                            欢迎登陆
                        </MenuItem>
                        <MenuItem name="3" style="color:#fff">
                            <Icon type="ios-person"></Icon>
                            {{formInline.name}}
                        </MenuItem>
                        <MenuItem name="4">
                            <Icon type="log-out"></Icon>
                            <Button type="success" @click="loginOut" >退出</Button>
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
            <Layout>
                <Sider hide-trigger :style="{background: '#fff'}">
                    <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                        <Submenu name="1">
                            <template slot="title">
                                <Icon type="ios-navigate"></Icon>
                                管理模块
                            </template>
                            <MenuItem name="1-1"><router-link to="/cate">分类管理</router-link> </MenuItem>
                            <MenuItem name="1-2"><router-link to="/user">用户管理</router-link> </MenuItem>
                            <MenuItem name="1-3"><router-link to="/news">新闻管理</router-link></MenuItem>
                            <MenuItem name="1-4"><router-link to="/comment">评论管理</router-link></MenuItem>
                            <MenuItem name="1-5"><router-link to="/product">产品管理</router-link></MenuItem>
                            <MenuItem name="1-6"><router-link to="/upload">上传管理</router-link></MenuItem>
                        </Submenu>
                        <Submenu name="2">
                            <template slot="title">
                                <Icon type="ios-keypad"></Icon>
                                其他
                            </template>
                            <MenuItem name="2-1">Option 1</MenuItem>
                            <MenuItem name="2-2">Option 2</MenuItem>
                        </Submenu>
                        <Submenu name="3">
                            <template slot="title">
                                <Icon type="ios-analytics"></Icon>
                                其他
                            </template>
                            <MenuItem name="3-1">Option 1</MenuItem>
                            <MenuItem name="3-2">Option 2</MenuItem>
                        </Submenu>
                    </Menu>
                </Sider>
                <Layout :style="{padding: '0 24px 24px'}">
                    <Breadcrumb :style="{margin: '24px 0'}">
                        <BreadcrumbItem>Home</BreadcrumbItem>
                        <BreadcrumbItem>Components</BreadcrumbItem>
                        <BreadcrumbItem>Layout</BreadcrumbItem>
                    </Breadcrumb>
                    <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                      <router-view></router-view>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    </div>
   <div v-else>
      <Modal
        title="login"
        v-model="modal1"
        class-name="vertical-center-modal">
            <p slot="header" style="color:#f60;text-align:center">
                 <span>登录到管理系统</span>
            </p>
            <div style="text-align:center">
            <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
                    <FormItem prop="name">
                        <Input type="text" v-model="formInline.name" placeholder="Username">
                            <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem></br>
                    <FormItem prop="password">
                        <Input type="password" v-model="formInline.password" placeholder="Password">
                            <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem></br>
                    <FormItem>
                        <Button type="primary" size="large" @click="handleSubmit('formInline')">login</Button>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">

            </div>
        </Modal>

    </div>
</template>
<script>
    import md5 from"crypto-js/md5"
    export default {
        data(){
            return{
                show:false,
                modal1: true,
                 formInline: {
                    name: '',
                    password: ''
                },
                ruleInline: {
                    name: [
                        { required: true, message: 'Please fill in the user name', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                        { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                    ]
                }

            }
        },
         methods: {
            handleSubmit(name) {
           this.formInline.password= md5(this.formInline.password).toString()
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$http.post("http://10.31.160.25:3000/users/list",this.formInline).then((res)=>{
                            if(res.data.rows.length!=0){
                                 if(res.data.rows[0].name==this.formInline.name&&res.data.rows[0].password==this.formInline.password)
                                { this.show=true;}else {
                                this.$Message.error('密码输入错误!');
                            }
                            }else {
                                this.$Message.error('用户名错误!');
                            }
                        })

                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            loginOut(){
                this.show=false
            }
        }
    }
</script>
<style scoped>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}
.vertical-center-modal{
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal{
        top: 0;
    }
}

</style>






